<template>
  <div class="com-show-input-border business-info-track-feedback">
    <Row class="home-page-content" align="middle">
      <BtnPlain class="com-action-btn" type="primary" @click="goBack">返回</BtnPlain>
      <h3>经营信息反馈填写表</h3>
    </Row>

    <div class="home-page-content business-Info">
      <Row justify="space-between" align="middle">
        <BtnPlain class="com-action-btn" type="primary">{{ info.lastNewFeedbackPhaseName }}</BtnPlain>
        <div>经营人员 {{ info.busiPersonName || '--' }}</div>
      </Row>
      <Row class="mt-20" align="middle">
        <h3>{{ info.projectName }}</h3>
      </Row>
      <Divider />
      <h4 class="info-title">反馈信息填写</h4>
      <Form ref="formData" :model="formData" :rules="rules">
        <Row>
          <Col span="8">
            <FormItem label="反馈阶段" prop="feedbackPhase">
              <Select v-model="formData.feedbackPhase" placeholder="请选择" clearable>
                <Option :value="value" v-for="(label, value) in EnumFeedbackPhase" :key="value">{{ label }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="16">
            <FormItem label="接洽内容描述" prop="content">
              <Input type="textarea" :rows="4" v-model="formData.content" placeholder="请输入"></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="上传文件" prop="fileVoList">
              <UploadFiles v-model="formData.fileVoList" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Divider />
      <div class="derivative">
        <span>派生信息</span>
        <span class="optional">选填</span>
      </div>
      <Table :columns="columns" :data="listData" v-if="listData.length">
        <template slot-scope="{ row }" slot="industryName">{{ getIndustryName(row)}}</template>
        <template slot-scope="{ row, index }" slot="action">
          <BtnText type="warning" @BtnClick="onEdit(row)">修改</BtnText>
          <BtnText type="error" @BtnClick="onDel(index)">删除</BtnText>
        </template>
      </Table>
      <div class="derivative-add" @click="onAdd">点击添加</div>
      <Button type="primary" @click="onSub">提交</Button>
    </div>

    <Modal v-model="modalValue" width="1000" title="新增派生信息" :mask-closable="false">
      <div class="business-info-add">
        <BusinessInfoAdd :info="busiInfo" ref="businessInfoAdd" />
      </div>
      <Row slot="footer">
        <Button type="primary" @click="onConfirm">确认</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { busInfoTrackGetDetail, busInfoTrackFillFeedback, busiInfoGetData } from '@/api/businessInformationManage.js'
import BusinessInfoAdd from './common/businessInfoAdd.vue'
import UploadFiles from '@/pages/components/uploadFiles/index.vue'
import { cloneDeep, throttle } from 'lodash';

export default {
  name: 'businessInfoTrackFeedback',
  components: { BusinessInfoAdd, UploadFiles },
  data () {
    return {
      info: {},
      busInfoTrackId: '',
      formData: {
        feedbackPhase: '',
        content: '',
        fileVoList: []
      },
      rules: {
        content: { required: true, message: '接洽内容必填' },
        feedbackPhase: [
          { required: true, message: '反馈阶段必填', trigger: 'change' }
        ],
      },
      columns: [
        {
          title: '项目名称',
          key: 'projectName',
        },
        {
          title: '省份',
          key: 'province',
        },
        {
          title: '城市',
          key: 'city',
        },
        {
          title: '产业标记',
          slot: 'industryName',
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
        },
      ],
      listData: [],
      modalValue: false,
      busiInfo: {},
      EnumFeedbackPhase: {
        // PairingNotAgree: '未接收',
        // ProjectNotDiscussed: '未接洽',
        ProjectFollowUp: '跟进中',
        ProjectAlreadyDeliverTender: '已投标',
        ProjectUnDeliverTender: '未投标',
        ProjectWinTheBid: '已中标',
        ProjectSignAContract: '已签约',
        Other: '其他',
        // End: '已结束',
      },
      busiInfoCopy: {}
    }
  },
  created () {
    const { busInfoTrackId } = this.$route.query
    this.busInfoTrackId = busInfoTrackId
    this.init(busInfoTrackId)
  },
  methods: {
    async init (busInfoTrackId) {
      this.info = await busInfoTrackGetDetail({ busInfoTrackId })
      this.busiInfoCopy = await busiInfoGetData({ busiInfoId: this.info.busiInfoId })
      this.busiInfoCopy.parentId = this.info.busiInfoId
      this.busiInfoCopy.busiIndustryAssignList = []
      this.busiInfoCopy.createDateTime = null
      this.busiInfoCopy.updateDateTime = null
    },
    onAdd () {
      this.modalValue = true
      this.busiInfo = cloneDeep(this.busiInfoCopy)
    },
    onConfirm () {
      const { flag, formData } = this.$refs.businessInfoAdd.getData()
      if (!flag) return
      this.modalValue = false
      this.listData.push(formData)
    },
    getIndustryName (row) {
      return row.busiIndustryAssignList.map(it => it.industryName).join(',')
    },
    onEdit (row) {
      this.modalValue = true
      this.busiInfo = row
    },
    onDel (i) {
      this.listData.splice(i, 1)
    },
    goBack () {
      this.$router.replace({ path: '/businessInformationTrack' });
    },

    onSub: throttle(function () {
      this.$refs['formData'].validate(async (valid) => {
        if (!valid) {
          this.$Message.error('数据填写不完整!');
          return
        }
        const request = {
          ... this.formData,
          busInfoTrackId: this.busInfoTrackId,
          deriveBusiInfoList: this.listData
        }

        await busInfoTrackFillFeedback(request)
        this.$Message.success('填写成功！');
        this.goBack()
      })
    }, 500)
  }
}
</script>

<style lang='less' scoped>
.business-Info {
  margin-top: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.info-title {
  margin: 10px 0;
}

.derivative {
  margin-bottom: 10px;

  .optional {
    margin-left: 10px;
    font-size: 13px;
    color: #7b8591;
  }
}

.derivative-add {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 20px 0;
  cursor: pointer;
  background-color: #f5f7f9;
  border: 1px dotted #ccc;
}

.business-info-add {
  height: 600px;
  overflow: scroll;
}
</style>

<style lang="less">
.tangram-suggestion-main {
  z-index: 3000;
}
</style>
